<template>
  <el-container>
    <el-header>
      <base-header :apps="apps" @getActiveId="getActiveId" v-model:activeId="activeId"> </base-header>
    </el-header>
    <el-container>
      <el-aside class="aside">
        <base-side :asides="asidesData"></base-side>
      </el-aside>
      <el-main class="main"><router-view></router-view></el-main>
    </el-container>
    <el-footer class="footer">Footer</el-footer>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      apps: [
        {
          "id": "0",
          "name": "首页"
        },
        {
          "id": "11",
          "name": "控制台",
          "asides": [
            {
              "id": "11",
              "name": "home",
              "path": "/"
            },
            {
              "id": "33",
              "name": "NorthCapital",
              "path": "/NorthCapital"
            },
            {
              "id": "44",
              "name": "NetInflowTop",
              "path": "/NetInflowTop"
            },
            {
              "id": "55",
              "name": "北向资金",
              "subAsides": [
                {
                  "id": "5501",
                  "name": "北向资金增持行业板块排行",
                  "path": "/BoardNorthCapital"
                },
                {
                  "id": "5502",
                  "name": "北向资金持股个股排行",
                  "path": "/NorthCapitalStock"
                },
                {
                  "id": "5503",
                  "name": "北向资金持股个股明细",
                  "path": "/NorthCapitalStockDetail"
                },
              ]
            },
            {
              "id": "88",
              "name": "龙抓手",
              "subAsides": [
                {
                  "id": "8800",
                  "name": "choice",
                  "path": "/choice"
                },
                {
                  "id": "8801",
                  "name": "涨停股池",
                  "path": "/ZtgcStock"
                },
                {
                  "id": "8802",
                  "name": "昨日涨停股池",
                  "path": "/ZrztStock"
                },
              ]
            },

          ]
        },
        {
          "id": "22",
          "name": "VUE测试",
          "asides": [
            {
              "id": "111",
              "name": "TestTable",
              "path": "/TestTable"
            },

            {
              "id": "222",
              "name": "测试二级菜单",
              "path": "/test",
              "subAsides": [
                {
                  "id": "2200",
                  "name": "home",
                  "path": "/"
                },
                {
                  "id": "2201",
                  "name": "TestPagination",
                  "path": "/TestPagination"
                },
                {
                  "id": "2202",
                  "name": "TestMessageBox",
                  "path": "/TestMessageBox"
                },
              ]
            },
            {
              "id": "333",
              "name": "TestDatePicker",
              "path": "/TestDatePicker"
            },
            {
              "id": "444",
              "name": "TestForm",
              "path": "/TestForm"
            },
            {
              "id": "555",
              "name": "TestDialog",
              "path": "/TestDialog"
            },
            {
              "id": "666",
              "name": "TestLayout",
              "path": "/TestLayout"
            },

          ]
        }
      ],
      activeId: "1"
    }
  },
  methods: {
    getActiveId(activeId) {
      console.log("getActiveId1:", activeId)
      this.activeId = activeId
    }
  },
  computed: {
    asidesData() {
      let app = this.apps.filter(t => t.id == this.activeId);
      if (app.length > 0)
        return app[0].asides;
      else
        return []
    }
  }
}

</script>

<style>
.footer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 70px;
  background-color: white;
  width: 100%;
}
</style>